<template>
	<view class="bg-white px-1 py-2">
		<view class="flex j-sb">
			<view class="input_view flex flex-wrap flex-1 j-sb">
				<view class="span-10 px-1 mb-2">
					<u--input type="text" v-model="query.model" placeholder="手机型号查询" clearable fontSize="12px"
						@confirm="searchList" @blur="searchList"></u--input>
				</view>
				<view class="span-10 px-1 mb-2">
					<u--input type="text" v-model="query.subrackDesc" placeholder="机况查询" clearable fontSize="12px"
						@confirm="searchList" @blur="searchList"></u--input>
				</view>
				<view class="span-10 px-1 mb-2" v-if="isMore">
					<u--input type="text" v-model="query.brand" placeholder="手机品牌查询" clearable fontSize="12px"
						@confirm="searchList" @blur="searchList"></u--input>
				</view>
				<view class="span-10 flex j-sb px-1 mb-2 a-center" v-if="isMore">
					<view>
						<u--input type="text" v-model="query.minStorageAge" placeholder="最小库龄" clearable fontSize="12px"
							@confirm="searchList" @blur="searchList"></u--input>
					</view>
					<view class="mx-1 text-primary">-</view>
					<view>
						<u--input type="text" v-model="query.maxStorageAge" placeholder="最大库龄" clearable fontSize="12px"
							@confirm="searchList" @blur="searchList"></u--input>
					</view>
				</view>
				<view class="span-10 px-1" v-if="isMore" @click="showPicker=true">
					<view class="flex j-sb a-center rounded-10" style="border: 1px solid #dadbde;padding: 12rpx 10rpx;">
						<view class="font" style="color: #333;" v-if="query.warehouse">{{query.warehouse}}</view>
						<view class="font" style="color: #c0c4cc;" v-if="!query.warehouse">所在仓库</view>

						<u-icon name="arrow-down" color="#c0c4cc" size="14"></u-icon>
					</view>
				</view>
			</view>
			<view>
				<u-icon name="scan" color="#00B0FF" size="26"></u-icon>
			</view>
		</view>
		<view class="flex a-center j-end px-2 mt-2 mb-2" v-if="!isMore" @click="moreSearch">
			<text class="font text-primary">更多查询条件</text>
			<u-icon name="arrow-down" color="#00B0FF" size="14"></u-icon>
		</view>
		<view class="flex a-center j-end px-2 mt-2 mb-2" v-if="isMore" @click="moreSearch">
			<text class="font text-primary">收起</text>
			<u-icon name="arrow-up" color="#00B0FF" size="14"></u-icon>
		</view>

		<view class="p-1" v-if="listsData.length!=0">
			<view class="py-1 px-2 border rounded-10 mb-2" v-for="(item,index) in listsData" :key="index"
				@click="navigateTo('pages/warehouse/product/detail')">
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">所在仓库：</view>
					<view>{{item.warehouseName}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">商品编码：</view>
					<view>{{item.productCode}}</view>
					<image src="@/static/images/fuzhi.png" mode="widthFix" class="svgmini ml-3"
						@click="utils.setClipboardData(item.productCode)"></image>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">手机型号：</view>
					<view>{{item.model}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">手机品牌：</view>
					<view>{{item.brand}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">内存：</view>
					<view>{{item.memory}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">颜色：</view>
					<view>{{item.colour}}</view>
				</view>
				<view class="flex j-start a-center my-2" >
					<view class="text-right col-170">IMEI：</view>
					<view class="flex-1">{{item.imei?item.imei:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">机况：</view>
					<view class="flex-1">{{item.subrackDesc?item.subrackDesc:'--'}}</view>
				</view>
				
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">库龄：</view>
					<view>{{item.maxStorageAge}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">成本价：</view>
					<view>{{item.costPrice}}</view>
				</view>
			</view>
		</view>

		<empty v-else />

		<u-picker :show="showPicker" :columns="warehouseColumns" keyName="label" @confirm="confirmPicker"></u-picker>
	</view>
</template>

<script>
	import {
		itLibraryList
	} from '@/common/api/itLibrary.js'
	export default {
		name: "itLibrary",
		data() {
			return {
				query: {
					model: null,
					brand: null,
					subrackDesc: null,
					minStorageAge: null,
					maxStorageAge: null,
					pageNo: 1,
					pageSize: 20,
				},
				listsData: [],
				isMore: false,
				showPicker: false,
				warehouseColumns: [
					[{
						label: '冷夜雨',
						id: 804
					}, {
						label: '冷夜',
						id: 802
					}]
				]
			}
		},
		onLoad() {
			this.searchList();
		},
		watch: {},
		computed: {},
		methods: {
			searchList() {
				this.isLoadMore = false;
				this.listsData = [];
				this.query.pageNo = 1;
				this.getLists()
			},
			getLists() {
				itLibraryList(this.query).then(res => {
					if (res.data.list.length == 0) {
						let oldLoad = {}
						this.isLoadMore = true;
						oldLoad = Object.assign({}, this.query);
						oldLoad.pageNo = this.query.pageNo;
						this.query = oldLoad
						this.$forceUpdate()
						return
					}

					this.isLoadMore = false;
					let oldList = this.listsData || []
					oldList.push(...res.data.list)
					this.listsData = oldList
				})
			},
			moreSearch() {
				this.isMore = !this.isMore;
			},
			confirmPicker(val) {
				this.query.warehouse = val.value[0].label;
				this.showPicker = false
			}
		}
	}
</script>

<style lang="scss">
	.input_view {
		.u-input {
			padding: 4rpx 10rpx !important;
		}
	}
</style>